import React from 'react';

interface StatCardProps {
  label: string;
  value: string;
  trend: string;
  trendValue: string;
  trendDirection?: 'up' | 'down';
}

const StatCard: React.FC<StatCardProps> = ({ 
  label, 
  value, 
  trend, 
  trendValue, 
  trendDirection = 'up' 
}) => {
  return (
    <div className="stat-card">
      <p className="label">{label}</p>
      <p className="value">{value}</p>
      <p className="trend">
        {trend}
        <span className={`trend-${trendDirection}`}>
          {trendValue} {trendDirection === 'up' ? '▲' : '▼'}
        </span>
      </p>
    </div>
  );
};

export default StatCard;